<template>
  <view class="footer" @click="goCart">
    <view class="let">
      <view class="icons">
        <image :src="asyncImgs.index.cat" mode="widthFix"></image>
        <view class="num" v-if="list.length">{{
          list.length >= 99 ? "99+" : list.length
        }}</view>
      </view>
      <view class="price">
        <view class="activePrce">{{ getPrice[0] }}</view>
        <view class="oldPrce">{{ getPrice[1] }}</view>
      </view>
    </view>
    <view class="rig" @click.stop="pay"> 去结算 </view>
  </view>
</template>

<script>
export default {
  props: {},

  computed: {
    getPrice() {
      let { list } = this,
        price = 0,
        oldPrice = 0;

      list.forEach((el) => {
        price += el.price;
        oldPrice += el.original_price || el.price;
      });

      price = price.toFixed(2);
      oldPrice = oldPrice.toFixed(2);
      return [price, oldPrice];
    },
  },

  created() {
    this.init();
  },

  data() {
    return {
      list: [],
    };
  },

  methods: {
    goCart() {
      uni.switchTab({
        url: "/pages/shoppingcart/shoppingcart",
      });
    },

    async init() {
      let res = await this.$allrequest.goodscart.getCartList();
      if (!res.code) {
        this.list = res.data.list || [];
      }
    },

    pay() {
      let { list } = this;
      if (!list.length) {
        uni.showToast({
          title: "请添加商品",
          icon: "none",
        });
        return;
      }
      let parmas = {
        mch_id: 0,
        goods_list: [],
      };

      parmas.goods_list = list.map((el) => {
        return {
          cart_id: el.cart_id,
        };
      });

      uni.navigateTo({
        url:
          "/order/order-submit/order-submit?submit=" + JSON.stringify([parmas]),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  padding: 14rpx 24rpx calc(env(safe-area-inset-bottom) + 14rpx) 32rpx;
  width: 100%;
  background: #fff;
  z-index: 10;

  .let {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .icons {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    border-radius: 32px;
    background: #f0250e;

    image {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 44rpx;
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
    }

    .num {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32rpx;
      height: 32rpx;
      font-size: 22rpx;
      color: #fff;
      background: #f84a33;
      border-radius: 32px;
      font-weight: bold;
    }
  }

  .price {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    flex: 1;
    overflow: hidden;

    .activePrce {
      font-size: 36rpx;
      color: #262626;
      font-weight: bold;

      &:before {
        content: "¥";
        font-size: 24rpx;
      }
    }

    .oldPrce {
      margin: 10rpx 0 0 2rpx;
      position: relative;
      font-size: 24rpx;
      color: #8c8c8c;

      &:before {
        content: "¥";
      }

      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        right: 0;
        height: 1px;
        background: #8c8c8c;
      }
    }
  }

  .rig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 224rpx;
    height: 80rpx;
    border-radius: 32px;
    background: #f0250e;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style>
